<template>
<div class="container goods-list">
    <!-- 发现好货 -->

    <Divider>
        <h3>【新华社 发现好货】</h3>
    </Divider>

    <div class="goods-item">
        <ul>
            <li class="item1">
                <p class="goods-name">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
            <li class="item2">
                <p class="goods-name2">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief2">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
            <li class="item3">
                <p class="goods-name2">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief2">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
            <li class="item4">
                <p class="goods-name">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
            <li class="item5">
                <p class="goods-name2">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief2">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
            <li class="item6">
                <p class="goods-name2">产品名称</p>
                <span class="price">售价:</span><span class="prices">24元/平米</span>
                <p class="brief2">产品简介产品简介产品简介产品简介产品简介产品简介产品</p>
                <img :src="goodsData.bg1" alt="">
            </li>
        </ul>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            goodsData: {
                bg1: require('@/assets/banner1.png'),

            }
        }
    },
}
</script>

<style lang="less" scoped>
.goods-list {
    margin-bottom: 53px;

    .goods-item {
        position: relative;
        height: 340px;

        ul {
            //   display: flex;
            // display: -webkit-flex;
            // display: -ms-flex;
            // display: -moz-flex;

            li {
                padding: 30px 20px 24px;
                color: #fff;
                box-sizing: border-box;
            }

            li:hover {
                bottom: 3px;
                box-shadow: 0px 0px 20px #ccc;
                transition: all .1s linear;
                -moz-transition: all .1s linear;
                /* Firefox 4 */
                -webkit-transition: all .1s linear;
                /* Safari 和 Chrome */
                -o-transition: all .1s linear;
            }

            .item2:hover,
            .item5:hover {
                top: -3px;
                box-shadow: 0px 0px 20px #ccc;
                transition: all .1s linear;
                -moz-transition: all .1s linear;
                /* Firefox 4 */
                -webkit-transition: all .1s linear;
                /* Safari 和 Chrome */
                -o-transition: all .1s linear;
            }

            .item1 {
                width: 250px;
                height: 340px;
                background: url(../../../assets/bg1.png) no-repeat;
                position: absolute;
                bottom: 0;
            }

            .item2,
            .item3 {
                width: 320px;
                height: 160px;
            }

            .item2 {
                background: url(../../../assets/bg2.png) no-repeat;
                position: absolute;
                left: 270px;
                top: 0;

            }

            .item3 {
                background: url(../../../assets/bg3.png) no-repeat;
                position: absolute;
                left: 270px;
                bottom: 0;
            }

            .item4 {
                width: 250px;
                height: 340px;
                background: url(../../../assets/bg4.png) no-repeat;
                position: absolute;
                right: 340px;
                bottom: 0;
            }

            .item5,
            .item6 {
                width: 320px;
                height: 160px;
            }

            .item5 {
                background: url(../../../assets/bg5.png) no-repeat;
                position: absolute;
                right: 0;
                top: 0;
            }

            .item6 {
                background: url(../../../assets/bg6.png) no-repeat;
                position: absolute;
                right: 0;
                bottom: 0;
            }

            .item1,
            .item4 {
                img {
                    width: 150px;
                    height: 150px;
                    margin-right: auto;
                    margin-left: auto;
                    display: block;
                }
            }

            .item2,
            .item3,
            .item5,
            .item6 {

                img {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    right: 16px;
                    top: 50%;
                    margin-top: -50px;
                }
            }
        }

        .goods-name {
            text-align: center;
            padding-bottom: 20px;
        }

        .price {
            font-size: 12px;
            padding-right: 10px;

        }

        .prices {
            font-size: 16px;
        }

        .brief {
            padding-top: 10px;
            font-size: 12px;
            padding-bottom: 30px;
        }

        .goods-name2 {
            padding-bottom: 20px;
        }

        .brief2 {
            width: 170px;
            font-size: 12px;
            padding-top: 10px;
        }
    }
}
</style>
